<template>
	<view class="content">
		<view v-if="carInfo.cp" class="car">
			<view class="left">
				<view class="info1">
					<text class="text1">{{carInfo.cp}}</text>
					<view class="mark">
						<text>{{carInfo.cpColor}}</text>
					</view>
				</view>
				<view class="info2">
					<text>{{carInfo.type}}（车厢长{{carInfo.xc}}）</text>
				</view>
			</view>
			<view v-if="carInfo.status==1" class="right">
				<view class="dian"></view>
				<text class="text1">使用中</text>
			</view>
		</view>
		<!-- 完善 -->
		<view class="ws">
			<view class="ts">
				<text>请完善车辆规格，有助于提升您的接单数</text>
			</view>
			<view v-if="false" class="btn">
				<text>去填写</text>
			</view>
		</view>
		<view class="hz">
			<view class="title">
				<view class="mark"></view>
				<text class="text1">车辆信息</text>
			</view>
			<view class="main">
				<view class="item">
					<view class="left">
						<text>车牌颜色</text>
					</view>
					<view class="right">
						<input   placeholder="请输入" v-model="carInfo.cpColor" />
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text>车牌号码</text>
					</view>
					<view class="right">
						<input   placeholder="请输入" v-model="carInfo.cp" />
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text>车辆识别代号</text>
					</view>
					<view class="right">
						<input   placeholder="请输入" v-model="carInfo.sbdh" />
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text>车辆类别</text>
					</view>
					<view class="right">
						<input   placeholder="请输入" v-model="carInfo.type" />
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text>车厢(箱体)</text>
					</view>
					<view class="right">
						<input   placeholder="请输入" v-model="carInfo.xt" />
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text>车身(整体)</text>
					</view>
					<view class="right">
						<input   placeholder="请输入" v-model="carInfo.cs" />
					</view>
				</view>
        <picker @change="dateChange($event,'regisDate')" mode="date">
          <view class="item">
            <view class="left">
              <text>车辆注册日期</text>
            </view>
            <view class="right">
              <input    placeholder="请输入" disabled v-model="carInfo.regisDate" />
            </view>
          </view>
        </picker>

				<view class="item">
					<view class="left">
						<text>核定载人数</text>
					</view>
					<view class="right">
						<input type="number" placeholder="请输入" v-model="carInfo.kzNum" />
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text>总质量(kg)</text>
					</view>
					<view class="right">
						<input  type="number" placeholder="请输入" v-model="carInfo.weight" />
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text>燃料种类</text>
					</view>
					<view class="right">
						<input  type="number" placeholder="请输入" v-model="carInfo.rlzl" />
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text>行驶证所有人类型</text>
					</view>
					<view class="right">
						<input   placeholder="请输入" v-model="carInfo.syrType" />
					</view>
				</view>

			</view>
		</view>

		<view class="hz">
			<view class="title">
				<view class="mark"></view>
				<text class="text1">行驶证</text>
			</view>
			<view class="main">
				<view class="imgs">
					<view  @click="chooseImage('licenseimage')" class="idcard idcard2">
						<view class="img">
							<image v-if="!carInfo.licenseimage" src="/static/my/xj2.png" mode="widthFix"></image>
							<image v-else :src="domain()+carInfo.licenseimage" mode="widthFix"></image>
							<view v-if="!carInfo.licenseimage" class="wz">
								<text class="text1">拍摄行驶证副页</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="hz">
			<view class="title">
				<view class="mark"></view>
				<text class="text1">其他证件照</text>
			</view>
			<view class="main">
				<view class="imgs">
					<view   @click="chooseImage('otherimages')"  class="idcard idcard2">
						<view class="img">
              <image v-if="!carInfo.otherimages" src="/static/my/xj2.png" mode="widthFix"></image>
              <image v-else :src="domain()+carInfo.otherimages" mode="widthFix"></image>
							<view  v-if="!carInfo.otherimages"  class="wz">
								<text class="text1">拍摄交强险证明</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="hz">
			<view class="title">
				<view class="mark"></view>
				<text class="text1">车身照</text>
			</view>
			<view class="main">
				<view  class="imgs">
					<view  @click="chooseImage('zsimages')" class="idcard idcard2">
						<view class="img">
              <image v-if="!carInfo.zsimages" src="/static/my/xj2.png" mode="widthFix"></image>
              <image v-else :src="domain()+carInfo.zsimages" mode="widthFix"></image>

              <view  v-if="!carInfo.zsimages" class="wz">
								<text class="text1">拍摄车身照</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 提示 -->
		<view class="ts">
			<text>个人与车辆相关证件信息仅用于司机账号的创建和资料完善</text>
		</view>

		<!-- 按钮 -->
		<view v-if="!d" @click="handlerSubmit" class="btn2">
			<text>提交</text>
		</view>
	</view>
</template>

<script>
	import request from "@/common/request";
  import {baseUrl, domain} from "@/common/api";

  export default {
		data() {
			return {
        carInfo:{},
				name: '高和飞',
				idcard: '1212121',
				mobile: '135****9633',
				city: '长沙芙蓉区',
				lxr: '陈桂红',
				lxr_mobile: '13566666666',
        d:false,
			}
		},
    onLoad(query) {
      this.d = !!query.d;

      this.getCarInfo();
    },
		methods: {
      handlerSubmit(){
        const verify = [
          ['cp','请输入车牌号码'],
          ['cpColor','请输入车牌颜色'],
          ['sbdh','请输入识别代号'],
          ['xt','请输入车厢(箱体)'],
          ['regisDate','请输入注册日期'],
          ['kzNum','请输入核定载人数'],
          ['weight','请输入总质量(kg)'],
          ['rlzl','请输入燃料种类'],
          ['syrType','请输入行驶所有人类型'],
          ['licenseimage','请上传行驶证'],
          ['otherimages','请上传其他证件'],
          ['zsimages','请上传车身照片'],
        ]
        for (const [filed,msg] of verify) {
          if (!this.carInfo[filed]) return uni.showToast({
            title:msg,
            icon:'none'
          })
        }
        request({
          method:'POST',
          url:'/d/car/add',
          data:{
            ...this.carInfo,
          }
        }).then(res=>{
          uni.showToast({
            title:'录入成功',
            icon:''
          });
          setTimeout(()=>{
            uni.navigateBack();
          },1000)
        })
      },
      domain() {
        return domain
      },
      //上传图片
      chooseImage(field){
        uni.chooseImage({
          count:1,
          crop:{
            width:100,
            height:100
          },
          success:(result)=>{
            console.log(result)
            uni.uploadFile({
              url:baseUrl+'/common/upload?token='+uni.getStorageSync('token'),
              method:'POST',
              name: 'file',
              filePath:result.tempFilePaths[0],
              data:{
                token:uni.getStorageSync('token'),
                filePath:result.tempFilePaths[0],

              },
              success:(res)=>{
                this.$set(this.carInfo,field,JSON.parse(res.data).data.url)
              }
            })
          }
        })

      },
      //日期选择
      dateChange({detail: {value}}, field) {
        this.$set(this.carInfo, field, value)
      },
			getCarInfo(){
        request({
          url:'/d/car/index',
        }).then(res=>{
          console.log(res);
          let car = uni.getStorageSync('car');
          res.data.typeId =  car.typeId;
          res.data.xcId =  car.xcId;
          res.data.city =  car.city;
          this.carInfo = res.data;

        })
      }
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding-bottom: 100rpx;
		.car{
			margin: 20rpx 30rpx;
			background-color: #fff;
			padding: 20rpx 30rpx;
			border-radius: 20rpx;
			display: flex;
			.left{
				.info1{
					margin-top: 20rpx;
					line-height: 50rpx;
					display: flex;
					.text1{
						font-size: $uni-font-size-lg;
						font-weight: bold;
					}
					.mark{
						margin-left: 20rpx;
						border: 1rpx solid #0070E5;
						border-radius: 10rpx;
						text{
							display: block;
							width: 130rpx;
							height: 44rpx;
							margin: 5rpx;
							background-color: #0070E5;
							border-radius: 5rpx;
							line-height: 40rpx;
							letter-spacing: 10rpx;
							color: #fff;
							text-align: center;
						}
					}
				}
				.info2{
					margin-top: 20rpx;
					line-height: 40rpx;
				}
			}
			.right{
				margin-left: auto;
				display: flex;
				line-height: 40rpx;
				.dian{
					margin-top: 15rpx;
					width: 10rpx;
					height: 10rpx;
					border-radius: 50%;
					background-color: #8463F8;
				}
				.text1{
					margin-left: 10rpx;
					font-weight: bold;
					color: #8463F8;
				}
			}
		}
		//完善
		.ws{
			margin: 20rpx 30rpx;
			background-color: #fff;
			padding: 20rpx;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.ts{
				line-height: 40rpx;
				text-align: center;
			}
			.btn{
				margin-top: 20rpx;
				width: 520rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				color: #F6767D;
				border: 1rpx solid #F6767D;
				border-radius: 10rpx;
				font-weight: bold;
			}
		}
		.hz{
			margin-top: 20rpx;
			background-color: #fff;
			padding: 20rpx 30rpx;
			.title{
				display: flex;
				line-height: 50rpx;
				.mark{
					margin-top: 10rpx;
					width: 6rpx;
					height: 30rpx;
					background-color: #8662F6;
					border-radius: 10rpx;
				}
				.text1{
					margin-left: 15rpx;
					font-size: $uni-font-size-lg;
					font-weight: bold;
				}
			}
			.main{
				margin-top: 10rpx;
				.item{
					display: flex;
					padding: 30rpx 0;
					border-bottom: 1rpx solid #F4F4F4;
					.left{
						color: #999;
						font-weight: bold;
					}
					.right{
						margin-left: auto;
						input{
							text-align: right;
						}
					}
				}
				.imgs{
					.title{
						line-height: 50rpx;
						font-size: $uni-font-size-lg;
						font-weight: bold;
						padding: 30rpx 0;
					}
					.idcard{
						display: flex;
						justify-content: space-between;
						padding: 0 15rpx;
						.img{
							width: 320rpx;
							height: 180rpx;
							border: 1rpx solid #ddd;
							border-radius: 10rpx;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							image{
								width: 130rpx;
							}
							.wz{
								margin-top: 10rpx;
								line-height: 50rpx;
								.text1{
									color: #6F6F6F;
									font-weight: bold;
								}
								.text2{
									margin-left: 10rpx;
									color: #9F84F5;
								}
							}
						}
					}

				}

			}
		}
		.ts{
			margin-top: 40rpx;
			line-height: 30rpx;
			font-size: $uni-font-size-sm;
			text-align: center;
			color: #767676;
		}
		.btn2{
			margin: 100rpx auto;
			width: 700rpx;
			height: 90rpx;
			line-height: 90rpx;
			background-color: #895FFF;
			border-radius: 45rpx;
			text-align: center;
			font-size: $uni-font-size-lg;
			font-weight: bold;
			letter-spacing: 5rpx;
			color: #fff;
		}
	}
</style>
<style>
	page{
		background-color: #F6F6F6;
	}
</style>
